import React, { useState, useEffect } from 'react'
import './index.less'
import { getUser, removeUser } from "@/utils/storage"
import { Modal } from 'antd';
import { useNavigate } from 'react-router-dom'
import { ExclamationCircleOutlined } from '@ant-design/icons'


export default function Top(props) {
    const [newTime, setNewTime] = useState(new Date().toString())
    const { username = "" } = getUser()

    useEffect(() => {
        const timer = setInterval(() => {
            setNewTime(new Date().toString())
        }, 1000)
        // 清除定时器
        return () => clearInterval(timer)
    }, [])

    function isLogin() {
        if (username) {
            return (
                <div >
                    <span>欢迎{username}</span>
                    <span onClick={signOut} className="btn">退出</span>
                </div>
            )
        } else {
            return (
                <div>
                    <span className="btn">请登录</span>
                </div>
            )
        }
    }

    function signOut() {
        Modal.confirm({
            title: '是否退出登陆?',
            icon: <ExclamationCircleOutlined />,
            okText: '确认',
            cancelText: '取消',
            onOk() {
                removeUser()
                navigate("/us-login", { replace: true })
            },
        });
    }

    const navigate = useNavigate()

    return (
        <div className='top'>
            <div className='top_signOut'>
                {isLogin()}
                {/* <div >
                    <span style={{ marginRight: "10px" }}>欢迎{username}</span>
                    <span style={{ color: "#1da57a" }}>退出</span>
                </div>

                <div>
                    <span style={{ color: "#1da57a" }}>请登录</span>
                </div> */}
            </div>

            <div className='top_title'>
                <span>{props.routeTitle}</span>
                <span className='time'>
                    {newTime}
                </span>
            </div>
        </div>
    )
}
